<!DOCTYPE html>
<html>
<head>
	<title>Admin Home</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="/css/style.css" />
	<script type="text/javascript" src="/jquery/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="../script.js"></script>
	<script type="text/javascript" src="../websock.js"></script>
	<script type="text/javascript" src="accounts.js"></script>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
		google.load('visualization', '1', {packages: ['table']});
	</script>
</head>

<body>
<div class="page">
	<div class="title round-v">Admin</div>
	<div class="menu round-v">
		<a id="btnRailroad" href="#" onclick="openRailroadControlTab();" title="Railroad">Railroad</a>
		<a id="btnManageUsers" href="#" onclick="openManageUsersTab();" title="Manage Users">Manage Users</a>
		<a href="#" onclick="CameraDisplay();" style="display:block; float:right; padding:0px 3px;"><img width="24" height="24" src="/images/camera.png" /></a>
	</div>
	
	<div id="div_content" class="content round-v">
	
<!-- Railroad controls tab -->
	<div id="div_railroad_controls">
		<table class="home_layout">
		<tr>
			<td>
				<div class="section">
					<div class="section_header">
						Railroad System
						<span id="lblSystemStatus" class="system_status" style="margin-left:15px;"></span>
					</div>
					<div class="section_body">
						<table>
							<tr>
							<td><input type="button" class="button_gray" onclick="startSystem();" value="Start"/></td>
							<td><input type="button" class="button_gray" onclick="stopSystem();" value="Stop"/></td>
							<td colspan="2" style="width:100%;">
								<div style="float:right; text-align:center; font-size:10px; color:#666">
									Send power signal<br/>
									<input type="button" class="power_button" onclick="powerOn();" value="On"/>
									<input type="button" class="power_button" onclick="powerOff();" value="Off"/>
								</div>
							</td>
							</tr>
						</table>
						
					</div>
				</div>
			</td>
			<td rowspan="2" style="width:42%;">
				<div id="train_section" class="section" style="display:none;">
					<div class="section_header">
						<table style="width:100%;">
						<tr>
							<td style="font-size: 14px;font-weight: bold;">Trains</td>
							<td><input type="button" class="button_gray" style="font-size:11px; height:30px; margin-left:15px;" onclick="InitializeTrains();" value="Initialize"/></td>
							<td>
								<button id="emer-toggle-button" name="emergency" style="float:right; padding:2px;" onclick="toggleEmergency();">
									<img width="18" height="18" alt="Emergency" src="/images/emergency.png" />
								</button>
							</td>
						</tr>
						</table>
					</div>
					<div class="section_body" style="padding-top:0;">
						<table id="div_throttles">
							
						</table>
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div id="switch_section" class="section" style="display:none;">
					<div class="section_header">Track Switches</div>
					<div class="section_body">
						<input type="button" class="button_gray" onclick="SimpleSwitch();" value="Basic"/>
						<input type="button" class="button_gray" onclick="VisualSwitch();" value="Visual"/>
						<input type="button" class="button_gray" onclick="EmergencySwitch();" value="Direct"/>
					</div>
				</div>
			</td>
			<td></td>
		</tr>
		</table>
	</div>
<!-- END Railroad controls tab -->
		
<!-- User management tab -->
		<div id="div_manage_users" style="display:none;">
		</div>
		
	</div>
</div>

<script type="text/javascript">
	window.top.emergency_mode=false;
	conn.connect();
	selectMenuItem('#btnRailroad');
	// resizeTrainDiv();
	
	$('#emer-toggle-button').click(function(){
		 $(this).toggleClass("down");
		 
	});
	
	//$(document).ready(function(){
	//    $('.toggle-button').click(function(){
	//        $(this).toggleClass("down");
	//    });
	//});​
</script>
</body>
</html>